<template>
  <div class="main-aside">
    <div class="aside-logo">
      <img src="@/assets/img/logo.png" alt="logo" />
    </div>
    <div class="aside-menu">
      <el-menu
        v-if="menuList.length"
        :collapse="isFlag"
        :default-active="defaultActive"
        class="el-menu-vertical-demo"
      >
        <aside-item :menuList="menuList"></aside-item>
      </el-menu>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue"
import useLoginStore from "@/store/login/login"
import asideItem from "./aside-item.vue"
let props = defineProps({
  isFlag: Boolean
})
const loginStore = useLoginStore()
let menuList = ref(loginStore.menuList)
let defaultActive = ref("")
function fnSetActive() {
  let path = menuList.value[0].children
    ? menuList.value[0].children[0].path
    : menuList.value[0].path
  defaultActive.value = path
}
fnSetActive()
</script>
<style scoped lang="scss">
.main-aside {
  color: #ccc;
  .aside-logo {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      height: 40px;
    }
  }
  .el-menu {
    --el-menu-bg-color: none;
    --el-menu-text-color: #fff;
    --el-menu-hover-bg-color: #021da8;
    --el-menu-active-color: #fff;
    border-right: none;
    :deep(.el-sub-menu) {
      .el-menu-item {
        &.is-active {
          background: #021da8;
        }
      }
    }
    .el-sub-menu__title {
    }
  }
}
</style>
